<template>
  <div>
    <div style=";margin-left:20px">
      <el-col :span="12" style="margin: 15px 0"
        ><el-button type="primary" @click="addClk">新增</el-button>
        <el-button type="danger">批量设置为未审核</el-button>
        <el-button type="success" @click="batchRemoveClk"
          >批量删除</el-button
        ></el-col
      >
      <el-col :span="12" style="margin: 15px 0">
        <el-input
          placeholder="请输入内容"
          v-model="input"
          class="input-with-select"
        >
          <el-button
            slot="append"
            icon="el-icon-search"
            @click="doSearch"
          ></el-button>
        </el-input>
      </el-col>
      <el-table
        @selection-change="handleSelectionChange"
        :data="tableData"
        border
        style="width: 100%"
      >
        <el-table-column fixed type="selection" width="55"> </el-table-column>
        <el-table-column
          fixed
          type="index"
          width="50"
          label="#"
        ></el-table-column>
        <el-table-column prop="name" label="姓名" width="120">
        </el-table-column>
        <el-table-column prop="gender" label="性别" width="120">
        </el-table-column>
        <el-table-column prop="age" label="年龄" width="120"> </el-table-column>
        <el-table-column prop="loginName" label="用户名" width="250">
        </el-table-column>
        <el-table-column prop="loginKey" label="密码" width="250">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="200">
          <template slot-scope="scope">
            <el-button @click="updateClk(scope.row)" type="text" size="small"
              >修改</el-button
            >
            <el-button type="text" size="small" @click="removeClk(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-drawer
        :title="`${form.id ? '修改' : '新增'}用户`"
        :visible.sync="dialog"
        direction="rtl"
        custom-class="demo-drawer"
        ref="drawer"
      >
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="姓名">
            <el-input v-model="form.name"></el-input>
          </el-form-item>

          <el-form-item label="年龄">
            <el-input type="number" v-model="form.age"></el-input>
          </el-form-item>

          <el-form-item label="性别">
            <el-select v-model="form.gender" placeholder="请选择性别">
              <el-option label="男" value="男"></el-option>
              <el-option label="女" value="女"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="用户名">
            <el-input v-model="form.loginName"></el-input>
          </el-form-item>

          <el-form-item label="密码">
            <el-input v-model="form.loginKey" show-password></el-input>
          </el-form-item>

          <el-form-item label="头像">
            <el-upload
              class="avatar-uploader"
              action=""
              :show-file-list="false"
              :http-request="handlerUpload"
              ref="avatar"
            >
              <img
                v-if="form.avatar"
                :src="`http://localhost:3001/upload-files/${form.avatar}`"
                class="avatar"
              />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="doSubmit">保存</el-button>
            <el-button @click="cancelForm">取消</el-button>
          </el-form-item>
        </el-form>
      </el-drawer>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[2, 3, 5, 10]"
        :page-size="pageSize"
        layout="prev, pager, next"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import { mapState, mapMutations, mapActions } from "vuex";
export default {
  layout: "main",
  data() {
    return {
      input: "",
      dialog: false,
      form: {
        avatar: ""
      },
      formLabelWidth: "80px",
      deleteIds: ""
      // imageUrl:''
    };
  },
  async mounted() {
    await this.getList();
  },
  methods: {
    ...mapActions("users", [
      "getList",
      "addUser",
      "deleteUser",
      "updateUser",
      "upload"
    ]),
    ...mapMutations("users", ["CURRENTPAGE", "PAGESIZE"]),
    // 头像上传
    handlerUpload() {
      let avatar = this.$refs.avatar.uploadFiles[0],
        fd = new FormData();
      fd.append("avatar", avatar.raw);
      axios.post("http://localhost:3001/users/upload-avatar", fd).then(res => {
        let filename = res.data.data.filename;
        this.form.avatar = filename;
      });
    },

    // 搜索
    async doSearch() {
      await this.getList(this.input);
      this.CURRENTPAGE(0);
    },

    // 当前页改变
    async handleCurrentChange(val) {
      await this.CURRENTPAGE(val);
      if (this.input) {
        await this.getList(this.input);
      } else {
        await this.getList();
      }
    },

    // 页数改变
    async handleSizeChange(val) {
      await this.PAGESIZE(val);
      if (this.input) {
        await this.getList(this.input);
      } else {
        await this.getList();
      }
    },

    // 点击全选
    handleSelectionChange(val) {
      this.ids = val
        .map(item => {
          return item.id;
        })
        .join(",");
    },

    // 点击修改按钮
    updateClk(row) {
      this.form = { ...row };
      this.dialog = true;
    },

    // 删除
    async removeClk(id) {
      await this.deleteUser({ id });
    },

    // 新增
    addClk() {
      this.dialog = true;
    },

    //批量删除
    async batchRemoveClk() {
      await this.deleteUser({ id: this.ids });
    },

    // 提交表单
    async doSubmit() {
      if (this.form.id) {
        await this.updateUser(this.form);
      } else {
        await this.addUser(this.form);
      }
      this.dialog = false;
      this.clearForm();
    },

    // 取消提交
    cancelForm() {
      this.dialog = false;
      this.clearForm();
    },

    // 清空form
    clearForm() {
      this.form = {
        avatar: ""
      };
      this.imageUrl = "";
    }
  },
  computed: {
    ...mapState("users", ["tableData", "total", "currentPage", "pageSize"])
  }
};
</script>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
}
</style>

<style scoped>
.avatar-uploader .el-upload {
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>